<template>
    <div>
        <div  class="f-fl container">
            <div  class="header f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
                <com-select ref="comselect" label="告警状态"></com-select>
                <com-search ref="search" placeholder="请输入设备号"></com-search>
            </div>
            <div  class="header f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
                <com-count :cur="curAllItems" :count="count"></com-count>
            </div>
            <div  class="f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
                <loading v-show="!isShow"></loading>
                <table class="table" v-show="isShow">
                    <tr>
                        <td><p>告警类型</p></td>
                        <td><p>重要程度</p></td>
                        <td><p>告警时间</p></td>
                        <td><p>手机号</p></td>
                        <td><p>围栏名称</p></td>
                        <td><p>告警状态</p></td>
                        <td><p>告警描述</p></td>
                    </tr>
                    <template v-for="item in curPageData" v-if="curPageData.length>0">
                        <tr>
                            <td><p :title="item.status_desc">{{item.status_desc}}</p></td>
                            <td><p style="color:red;">严重</p></td>
                            <td><p>{{item.warning_time|toLocaleDate}}</p></td>
                            <td><p :title="item.account">{{item.account}}</p></td>
                            <td><p :title="item.electronic_fence_name">{{item.electronic_fence_name}}</p></td>
                            <td><p>{{+item.status?'告警中':'已结束'}}</p></td>
                            <td><p>{{item.desc}}</p></td>
                        </tr>
                    </template>
                    <template v-if="curPageData.length==0">
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>暂无数据~</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            </tr>
                    </template>

                </table>
            </div>
            <div  class="f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
                <turn-page :counts="count" ref='curP'></turn-page>
            </div>

        </div>

    </div>
</template>
<script>
    import comSelect from 'c/com_select/com_select_component'
    import comDate from 'c/com_date/pick_date'
    import comCount from 'c/com_count/count'
    import comSearch from 'c/com_search/search'
    import turnPage from 'c/turn_page/turn_page'
    import loading from 'c/com_loading/inline_loading'
    export default{
        data(){
            return{
                page_size:10,
                page_num:1,
                search:'',
                count:0,
                status:'',
                time_start:'',
                time_end:'',
                need_count:1,
                curAllItems:1,
                curPageData:[],
                isShow:false,
                uid:'',
                electronic_fence_id:'',
            }
        },
        created(){

            this.bind()
        },
        mounted(){

            this.$refs.comselect.$emit('get-selected-list',{ '告警中':'1', '告警结束':'0'})

            if(sessionStorage.getItem('account')){
                this.uid=sessionStorage.getItem('account')
                sessionStorage.removeItem('account')
            }

            if(sessionStorage.getItem('electronic_fence_id')){
                this.electronic_fence_id=sessionStorage.getItem('electronic_fence_id')
                sessionStorage.removeItem('electronic_fence_id')
            }


            if(this.uid) this.$refs.search.$emit('set-search-keyword',this.uid)
            this.getQuery()
        },
        components:{
            comSelect,
            comDate,
            comCount,
            turnPage,
            comSearch,
            loading,
        },
        methods:{
            bind(){
                this.$on('choose-selected-status',value=>{
                    this.status=value
                    this.$refs.curP.chilFn(1)
                    this.page_num=1
                    this.getQuery()
                })
                this.$on('refresh',()=>{
                   if(store.loading) store.loading.show()
                    this.getQuery()
                })
                 this.$on('search',value=>{
                        this.search=value
                        this.$refs.curP.chilFn(1)
                        this.page_num=1
                        this.getQuery()
                    })
                this.$on('turn-page',value=>{
                    this.page_num=value
                    this.getQuery()
                })

                this.$on('search-date',date=>{
                    if(date){
                        this.time_start=date.date1
                        this.time_end=date.date2
                        this.$refs.curP.chilFn(1)
                        this.page_num=1
                        this.getQuery()
                    }
                })
            },

            getQuery(){
                this.$http.get('warning/get_warning_list',{
                    page_size:this.page_size,
                    page_num:this.page_num,
                    electronic_fence_id:this.electronic_fence_id,
                    account:this.uid,
                    status:this.status,
                    time_start:this.time_start,
                    time_end:this.time_end,
                }).then(res=>{
                    if(!res.result){
                        this.curPageData=res.data.list
                        this.curAllItems= res.data.list.length
                        this.count=res.data.count
                        this.isShow=true
                    }
                })
            },

        }
    }
</script>
<style lang="scss" scoped>
    .container{
        font-size:14px;
        background:#fff;
        margin-left:24px;
        width:100%;
    .header{
        height:60px;
        line-height:60px;
    }

    .table{
        width:100%;
        background: #F9FAFC;
        border:0;
        font-size:14px;
        table-layout: fixed;
    tr:nth-of-type(even){
        background:#fff;
    }
    tr{
        width:100%;
        height:44px;
        line-height:44px;
        border-bottom:1px #ccc solid;
        table-layout: fixed;
    td{
    p{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    text-align: left;
    text-indent: 10px;
    }
    &:first-child{
    td{
        border-top: 1px solid #DDD;
        border-bottom: 1px solid #DDD;
        border-left: 1px solid #DDD;
        color: #3D5266;
        font-size:16px;
    }
    }
    td:nth-of-type(1){
    width:160px;
    p{max-width:160px;}
    }
    td:nth-of-type(2){
        width:100px;
    p{max-width:100px;}
    }
    td:nth-of-type(3){
        width:200px;
    p{max-width:200px;}
    }
    td:nth-of-type(4){
        width:160px;
    p{max-width:160px;}
    span{
        padding:1px 5px;
        border-radius: 2px;
    }

    .red{
        border: 1px solid #E33244;
        color: #E33244;
    }
    .green{
        border: 1px solid #26BF8C;
        color: #26BF8C;
    }
    }
    td:nth-of-type(5){
        width:250px;
    p{max-width:250px;}
    }

    td:nth-of-type(6){
        width:160px;
    p{max-width:160px;}
    }


    }

    .blue{
        color: #3494E7;
    }
    .red{
        color: #E33244;
    }
    .gray{
        color:#888;
    }
    }
    }
</style>